{{ define "css"}}
    <style type="text/css">
        /*body {*/
        /*    background: #e5e5e5;*/
        /*}*/
        .topNav .container {
            border-bottom: 1px solid #E6EAEE;
        }
        .container .columns {
            margin: 1rem 0;
        }
        #topic-list .media-content strong a {
            color: currentColor;
        }
        #topic-list .media-content p {
            font-size: 14px;
            line-height: 2.3;
            /*font-weight: 700;*/
            color: #8F99A3;
        }
        #topic-list .media + .media {
            margin-top: 0.3rem;
            padding-top: 0.3rem;
        }
    </style>
{{ end }}

{{define "content"}}
    <section class="container">
        <div class="columns">
            <div class="column is-9">
                <div class="box content" id="topic-list">
                    {{ range $index, $value := .topics}}
                    <article class="media">
                            <div class="media-left">
                                <p class="image is-48x48">
                                    <img class="is-rounded" style="width: 48px;height: 48px;" src="{{.User.Avatar}}">
                                </p>
                            </div>
                            <div class="media-content">
                                <div class="content">
                                    <p>
                                        <strong><a href="/topics/{{.Id}}">{{.Title}}</a></strong>
                                        <br>
                                        <span class="tag">
                                            {{.Category.Name}}
                                        </span>
                                        <a href="/users/{{.User.Username}}">@{{.User.Username}}</a> •
                                        {{if gt .LastReplyUserId 0}} 最后由
                                            <a class="user-name" data-name="{{.LastReplyUser.Username}}" href="/users/{{.LastReplyUser.Username}}">
                                                {{.LastReplyUser.Username}}
                                            </a> •
                                            回复于 <abbr class="timeago" title="{{.LastReplyTimeAt}}">{{.LastReplyTimeAt}}</abbr>
                                        {{else}}
                                            发布于 <abbr class="timeago" title="{{.CreatedAt}}">{{.CreatedAt}}</abbr>
                                        {{end}}
                                    </p>
                                </div>
                            </div>
                            <div class="media-right">
                                <span class="has-text-grey-light"><i class="fa fa-eye"></i> {{.ViewCount}}</span>&nbsp;&nbsp;
                                <span class="has-text-grey-light"><i class="fa fa-comments"></i> {{.ReplyCount}}</span>
                            </div>
                    </article>
                    {{end}}
                </div>
                <nav class="pagination is-rounded" role="navigation" aria-label="pagination">
                    {{.pages}}
                </nav>
            </div>
            <div class="column is-3">
                {{if gt .user_id 0}}
                    <div class="box">
                        <a class="button is-link is-block is-alt is-medium" href="/topic/new">新建话题</a>
                    </div>
                {{end}}

                <article class="media box">
                    <div class="media-content">
                        <div class="content">
                            <h2 class="title is-6">阅读排行</h2>
                            <hr>
                            {{range .topTopics}}
                                <p>
                                    <a style="font-size: 0.9rem;" href="/topics/{{.Id}}">{{.Title}}</a> - <span class="has-text-grey">{{.ViewCount}}阅读</span>
                                </p>
                            {{end}}
                        </div>
                    </div>
                </article>
            </div>
        </div>

    </section>
{{end}}

{{ define "js"}}
{{ end }}
